<script setup>
import { reactive, computed } from 'vue'
import { useRequest } from 'vue-request'
import ajaxApi from '@/api/GoodsSpuApi'

// 声明触发事件
const props = defineProps({
  value: { type: String, default: null },
})
const emits = defineEmits(['update:value'])
const state = reactive({
  inputValue: computed({ get() {
    return props.value
  }, set(v) {
    emits('update:value', v)
  } })
})

// 防抖请求
const { run, data, loading } = useRequest(ajaxApi.getGoodsOptionList, {
  throttleInterval: 1000, // 流的执行间隔,每隔 1000 毫秒发起一次请求。
  debounceInterval: 300
})

// 数据表格的数据源
const optionList = computed(() => data.value?.data.dataList || [])
/*********************************/
const handleSearch = val => {
  console.info(`search: ${ val }`)
  run(val)
}
const handleChange = value => {
  console.log(`selected ${value}`)
  // state.inputValue = value
}
const handleBlur = () => {
  console.log('blur')
}
const handleFocus = () => {
  console.log('focus')
}
const filterOption = (input, option) => {
  // console.info('Input:' + input)
  // console.info(JSON.stringify(option))
  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
  // return true
}
</script>
<template>
  <div>
    <a-select
      v-model:value="state.inputValue"
      show-search
      placeholder="Select a Option"
      :options="optionList"
      :filter-option="filterOption"
      @search="handleSearch"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="handleChange"
    >
      <template v-if="loading" #notFoundContent>
        <a-spin size="small" />
      </template>
    </a-select>
  </div>
</template>